<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue-3</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<h1>数据双向绑定v-model, 计算属性computed</h1>
	<!-- 两种方法 -->
	<div id="vue-app">
		姓名：<input type="text" name="" v-on:keyup="logName" ref='name'>
		<label>{{ name }}</label>
		年龄：<input type="text" v-model="age">
		<label> {{ age }} </label>
		<button v-on:click="a++"> a++ </button>
		<button v-on:click="b++"> b++ </button>
		<p> a = {{ a }} </p>
		<p> b = {{ b }} </p>
		<p> a + age = {{ addToA }} </p>
		<p> b + age = {{ addToB }} </p>

	</div>
	
	<script type="text/javascript" src="vue-3-app.js"></script>
</body>
</html>